<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 加载提醒 -->
<div ng-show="loading" class="text-center m-t-md text-lg"><i class="fa fa-spin fa-spinner"></i> 数据加载中...</div>

<!-- 内容区域 -->
<div ng-hide="loading" class="wrapper-md content">
    <!-- 数据显示 -->
    <div class="wrapper-data">
        <div class="panel panel-default">
            <!-- 头部 -->
            <div class="panel-body">
                <!--<div class="w-lg">-->
                <form ng-submit="search()" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <input type="text" class="form-control" ng-model="param.platformName"
                                   placeholder="平台名称">
                        </div>

                        <div class="col-sm-2">
                            <input type="text" class="form-control" ng-model="param.mediaName"
                                   placeholder="媒体名称">
                        </div>

                        <div class="col-sm-2">
                            <select class="form-control" ng-model="param.enable" TITLE="停/启用状态">
                                <option value="">--全部状态--</option>
                                <option value="Y">启用中</option>
                                <option value="N">停用中</option>
                            </select>
                        </div>

                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary" ng-click="search(1)" type="submit">查 询</button></label>
                        </div>
                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-dark" ng-click="clearSearch()" type="reset">清 空</button></label>
                        </div>
                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary" ui-sref = "main.toolChest.media.create()"  >添加</button></label>
                        </div>
                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button type="button" class="ifc-btn btn-danger"  ng-click="batchDel()" >批量删除</button></label>
                        </div>
                        <div align="center">
                            <a style="align: right;color:blue;font-size: large"
                               ng-click="fileDown('mediaTemplet.xlsx')">下载导入模板</a>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row" align="right">
                            <div class="col-md-1">
                            </div>
                            <div class="col-md-1">
                                <a href="javascript:;" class="upload form-control">选择文件
                                    <input class="change" type="file" multiple="multiple" id="file" onchange="angular.element(this).scope().showInfo(this)"  />
                                </a>
                            </div>

                            <div class="col-md-1">
                                <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary"  ng-click="uploadFile()">批量导入</button></label>
                            </div>
                            <div  class="col-md-1">
                                <label style="color: green;" id="fileName"></label>
                            </div>
                            <div  class="col-md-1">
                                <label style="color: red;" id="importResult"></label>
                            </div>
                        </div>
                    </div>
                </form>
                <!--</div>-->
            </div>

            <!-- 数据表格 -->
            <div class="table-responsive">
                <table class="table table-striped b-t b-light text-center sort">
                    <thead>
                    <tr>
                        <th><input type="checkbox" ng-click="selectAll($event)"/>全选</th>
                        <th>平台名称</th>
                        <th>媒体类型</th>
                        <th>媒体名称</th>
                        <th>广告位</th>
                        <!--<th>媒体网址</th>-->
                        <!--<th>广告位链接</th>-->
                        <th>尺寸</th>
                        <th>流量类型</th>
                        <th>广告位类型</th>
                        <th>日展现量（万）</th>
                        <th>点击率（%）</th>
                        <th>启用开关</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="blogrollList">
                    <tr ng-repeat="item in pageInfo.records">
                        <td><input type="checkbox" name="selected" ng-checked="isSelected(item.id)" ng-click="updateSelection($event,item)"/></td>
                        <td class="v-middle" style="display: none">{{item.id}}</td>
                        <td class="v-middle">{{item.platformName}}</td>
                        <td class="v-middle">{{item.mediaType}}</td>
                        <td class="v-middle">
                            <a ng-if="item.mediaLink!=null" href="{{item.mediaLink}}" target="_blank">{{item.mediaName}}</a>
                            <a ng-if="item.mediaLink==null">{{item.mediaName}}</a>
                        </td>
                        <td class="v-middle">
                            <a ng-if="item.slotLink!=null" href="{{item.slotLink}}" target="_blank">{{item.slotName}}</a>
                            <a ng-if="item.slotLink==null">{{item.slotName}}</a>
                        </td>
                        <td class="v-middle">{{item.slotSize}}</td>
                        <td class="v-middle">
                            <span ng-if="item.flowType=='1'">web</span>
                            <span ng-if="item.flowType=='2'">app</span>
                        </td>
                        <td class="v-middle">{{item.slotType}}</td>
                        <td class="v-middle">
                            <span ng-if="item.dayShowVolume=='0'">-</span>
                            <span ng-if="item.dayShowVolume!='0'">{{item.dayShowVolume}}</span>
                        </td>
                        <td class="v-middle">{{item.clickRate*100}}</td>
                        <td class="v-middle">
                            <div style="margin-top: 10px; width: 45px; align:center; margin: 0 auto;">
                                <input ng-if="item.enable=='Y'" ng-click="oper(item.id,$event)" id="checked_{{item.id}}"  checked type="checkbox" class="switch" />
                                <input ng-if="item.enable=='N'" ng-click="oper(item.id,$event)" id="checked_{{item.id}}"  type="checkbox" class="switch" />
                                <label class="switchlabel" for="checked_{{item.id}}"></label>
                            </div>
                        </td>
                        <td class="v-middle">
                            <a ui-sref="main.toolChest.media.update({id: item.id})" class="btn btn-sm btn-default">
                                <i class="fa fa-edit m-r-xs text-sm"></i>编辑</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div><!-- /.table-responsive -->
            <!-- 底部分页 -->
            <span data-ng-include=" 'src/tpl/pageInfo.html' "></span>
        </div><!-- /.panel -->
    </div><!-- /.wrapper-data -->

</div><!-- /.wrapper-md -->
<style>
    .switch{
        display:none;
    }
    .switchlabel{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;
        margin-bottom: 15px;
        background-color: #eee;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;
    }
    .switchlabel:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: #BFBFBF;
        -webkit-transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;
    }
    .switchlabel:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
        -webkit-transform: translateX(-9px);
        -webkit-transition: all 0.3s ease;
    }
    .switch:checked~label:after{
        -webkit-transform: translateX(9px);
    }
    .switch:checked~label:before{
        background-color:green;
    }
    .change{
        position: absolute;
        overflow: hidden;
        top: 0;
        width: 84px;
        height:38px;
        opacity: 0;
        margin:0px 0px 0px 9px;
        left:8px;
    }
</style>